<template>
	<view class="page">
		<!-- 头部导航顶部区域开始 -->
		<view class="top-box" :style="{top:`calc(${menuButtonInfo.top}px - 0rpx)`}">
			<view class="top-tab">
				<view class="tab-item" :class="{'selected' : toptabselected == item.id}"
					v-for="(item,index) in toptabList" :key="index" @click="maskTopNavChange(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 头部导航顶部区域结束 -->
		<!-- 中间内容区域开始 -->
		<view class="content-box" :style="{marginTop:menuButtonInfo.height + menuButtonInfo.top + 10 + 'px'}">
			<!-- 导航切换显示区域开始 -->
			<view class="content-nav-box" >
				<view class="content-button" @click="goMaskSort" v-if="toptabselected == '1'">月周日</view>
				<view class="content-tab" v-if="toptabselected == '1'">
					<view class="tab-item" :class="{'selected':contenttabselected == item.id}"
						v-for="(item,index) in contenttabList" :key="index" @click="contenttabChange(item.id)">{{item.name}}</view>
				</view>
				<!-- 任务状态筛选区域开始 -->
				<scroll-view class="scroll-mask-nav-box" scroll-x v-if="toptabselected == '2'">
					<view class="nav-mask-content-box">
						<view class="scroll-nav-item" :class="{'selected': maskTypeselected == item.id}"
							v-for="(item,index) in maskTypeList" :key="index" @click="maskTypeChange(item.id)">{{item.name}}</view>
					</view>
				</scroll-view>
				<!-- 任务状态筛选区域结束 -->
				<!-- 任务时间筛选区域开始 -->
				<scroll-view class="scroll-nav-box" scroll-x>
					<view class="nav-content-box">
						<view class="scroll-nav-item" :class="{'navselected': maskTimeselected == item.id}"
							v-for="(item,index) in navList" :key="index" @click="maskTimeChange(item.id)">{{item.name}}</view>
					</view>
				</scroll-view>
				<!-- 任务事件筛选区域结束 -->
				<!-- 搜索框显示区域开始 -->
				<view class="search-box" v-if="toptabselected == '2'">
					<icon class="icon" type="search" size="20"></icon>
					<input class="text" @input="searchInputChange" v-if="messageType == false" type="text" :value="searchText" placeholder="任务编号,名称" @blur="searchConfirm" @confirm="searchConfirm" confirm-type="搜索" />
					<image @click="searchreset" v-if="searchText.length > 0" class="close-icon" src="/static/image/close_icon.png" mode="aspectFit"></image>
				</view>
				
				<!-- 搜索框显示区域结束 -->
				<movable-area  class="move-box" v-show="toptabselected == '2'">
					<movable-view @click="addTask" x="1000" :y="addPosition.y" class="add-box" direction="all"><image class="icon" src="/static/image/add_icon.png" mode="aspectFit"></image></movable-view>
				</movable-area>
			</view>
			<!-- 导航切换显示区域结束 -->
			<scroll-view class="card-box" :class="{'all-card-box': toptabselected == '2'}" scroll-y @scrolltolower="scrollpage">
				<!-- 卡片循环区域开始 -->
					<card Tasktype="TIME" v-for="(item,index) in MaskList" :key="index" :data="item" @Tap="maskDetail" @message="messageTypeOpen(item.id)"></card>
				<!-- 卡片循环区域结束 -->
				<view class="clear"></view>
			</scroll-view>
			<Message :Taskid="taskid" v-if="messageType == true" @close="messageTypeClose"></Message>
		</view>
		<!-- 中间内容区域介绍 -->
		<!-- tabbar组件显示区域开始 -->
		<!-- <Tabbar :selected="1"></Tabbar> -->
		<!-- tabbar组件显示区域结束 -->
	</view>
</template>

<script>
	import * as api from '@/utils/api.js'
	import card from '../component/card/card';
	import Message from '../component/disalog/message/message';
	export default {
		components: {
			card,Message
		},
		data() {
			return {
				taskid:null, // 任务id
				addPosition:{ //添加任务按钮坐标
					y:500
				},
				apiInfo:{
					currentPage:1,// 当前页码
					pageSize:10,// 当前每页显示条数
					type:1,
					timeType:0
				},
				pageinfo:{},// api 返回页码信息
				searchText:'',// 搜索框输入内容
				scrollPageType:true, // 是否允许翻页状态
				MaskList:[],// 任务列表
				messageType:false,// 消息弹窗显示状态
				toptabselected: 1, // 头部任务菜单选中id
				contenttabselected: 1, // 中间内容头部菜单tab选中id
				maskTypeselected:'', // 任务分类导航菜单tab选中id
				maskTimeselected: 0, // 任务时间导航菜单选中id
				toptabList: [ // 头部任务菜单列表
					{
						id: 1,
						name: '我的任务'
					},
					{
						id: 2,
						name: '全部任务'
					}
				],
				contenttabList: [ // 中间内容头部菜单tab列表
					{
						id: 1,
						name: "我负责"
					},
					{
						id: 2,
						name: "我发起"
					}
				],
				maskTypeList:[ // 任务状态菜单列表
					{
						id:'',
						name:'所有',
					},
					{
						id:'0',
						name:'未开始',
					},
					{
						id:'1',
						name:'进行中'
					},
					{
						id:'2',
						name:'已暂停'
					},
					{
						id:'3',
						name:'完成提报中'
					},
					{
						id:'4',
						name:'异常提报中'
					},
					{
						id:'5',
						name:'已完成'
					},
					{
						id:'6',
						name:'异常完成'
					},
				],
				navList: [ // 任务时间导航列表
					{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '逾期'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '今日'
					},
					{
						id: 4,
						name: '明日'
					},
					{
						id: 5,
						name: '本周'
					},
					{
						id: 6,
						name: '下周'
					},
					{
						id: 7,
						name: '本月'
					},
					{
						id: 8,
						name: '下月'
					},
				],
				menuButtonInfo: getApp().globalData.menuButtonInfo, // 获取全局变量胶囊位置信息
			}
		},
		onLoad() {
			this.addPosition.y = getApp().globalData.systemInfo.screenHeight * 0.67;
		},
		onShow(){
			let refreshPage = getApp().globalData.refreshPage;
			if(refreshPage == 'masklist' || refreshPage == 'tab'){
				this.scrollPageType= true;
				this.MaskList=[];
				this.toptabselected = 1;
				this.contenttabselected = 2;
				this.maskTypeselected = '';
				this.maskTimeselected = '';
				let toptabselected = this.toptabselected;
				let apiInfo = this.apiInfo;
				apiInfo.currentPage= 1;
				apiInfo.type = 1;
				this.apiInfo = apiInfo;
				getApp().globalData.refreshPage = null;
				// if(toptabselected == 1){
					this.initMytypeList(apiInfo);
				// }else if(toptabselected == 2){
					// this.initAlltypeList(apiInfo);
				// }
			}
		},
		
		onTabItemTap(){
			this.scrollPageType= true;
			this.MaskList=[];
			let apiInfo = this.apiInfo;
			apiInfo.currentPage= 1;
			this.apiInfo = apiInfo;
			let toptabselected = this.toptabselected;
			if(toptabselected == 1){
				this.initMytypeList(apiInfo);
			}else if(toptabselected == 2){
				this.initAlltypeList(apiInfo);
			}
		},
		methods: {
			/**
			 * 添加任务按钮触发事件
			 */
			addTask:function(){
				uni.navigateTo({
					url: '/pages/initiate/add/add'
				});
			},
			/**
			 * 滚动翻页触发事件
			 */
			scrollpage:function(){
				let scrollPageType = this.scrollPageType;
				if(scrollPageType == true){
					let toptabselected = this.toptabselected;
					let apiInfo = this.apiInfo;
					apiInfo.currentPage = apiInfo.currentPage + 1;
					this.apiInfo = apiInfo;
					if(toptabselected == 1){
						this.initMytypeList(apiInfo);
					}else if(toptabselected == 2){
						this.initAlltypeList(apiInfo);
					}
				}
			},
			/**
			 * 我的任务列表
			 */
			initMytypeList:function(data){
				let that = this;
				let MaskList = that.MaskList;
				api.TaskmyListPage(data).then(res=>{
					console.log(1111,res.data.result);
					MaskList.push.apply(MaskList,res.data.result);
					that.pageinfo = res.data.page;
					that.MaskList = MaskList;
					console.log('MaskList',MaskList);
					if(res.data.page.currentPage > res.data.page.totalPage){
						that.scrollPageType = false;
						uni.showToast({
							title: '没有更多',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			/**
			 * 初始化全部任务列表
			 */
			initAlltypeList:function(data){
				let that = this;
				let MaskList = that.MaskList;
				api.AlltypeListPage(data).then(res=>{
					MaskList.push.apply(MaskList,res.data.result);
					that.pageinfo = res.data.page;
					that.MaskList = MaskList;
					if(res.data.page.currentPage > res.data.page.totalPage){
						that.scrollPageType = false;
						uni.showToast({
							title: '没有更多',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			/**
			 * 消息弹窗开启触发事件
			 */
			messageTypeOpen:function(id){
				uni.hideTabBar();
				this.taskid = id;
				this.messageType = true;
			},
			/**
			 * 消息弹窗关闭触发事件
			 */
			messageTypeClose:function(){
				uni.showTabBar();
				this.messageType = false;
			},
			/**
			 * 任务导航切换触发事件
			 */
			maskTopNavChange:function(id){
				let data = {
					currentPage:1,// 当前页码
					pageSize:10,// 当前每页显示条数
					timeType:0
				};
				this.maskTypeselected='';
				this.maskTimeselected = 0;
				this.scrollPageType = true;
				this.MaskList = [];
				if(id == 2){
					data = Object.assign(data,{executeStatus:"",searchList:[]});
					this.apiInfo = data;
					this.initAlltypeList(data);
				}else if(id == 1){
					data = Object.assign(data,{type:this.contenttabselected});
					this.apiInfo = data;
					this.initMytypeList(data);
				}
				this.toptabselected = id;
			},
			/**
			 * 我的任务（发起、负责）导航触发事件
			 */
			contenttabChange:function(id){
				let data = {
					currentPage:1,// 当前页码
					pageSize:10,// 当前每页显示条数
				};
				this.scrollPageType = true;
				this.maskTimeselected = 0;
				if(id == 1){
					data = Object.assign(data,{type:1,timeType:0});
				}else if(id == 2){
					data = Object.assign(data,{type:0,timeType:0});
				}
				this.apiInfo = data;
				this.contenttabselected = id;
				this.MaskList = [];
				this.initMytypeList(data);
			},
			/**
			 * 任务状态筛选导航触发事件
			 */
			maskTypeChange:function(id){
				let apiInfo = this.apiInfo;
				apiInfo.currentPage = 1;
				apiInfo.executeStatus = id;
				this.scrollPageType = true;
				this.apiInfo = apiInfo;
				this.MaskList = [];
				this.maskTypeselected = id;
				this.initAlltypeList(apiInfo);
			},
			/**
			 * 任务时间晒选导航触发事件
			 */
			maskTimeChange:function(id){
				let toptabselected = this.toptabselected;
				let apiInfo = this.apiInfo;
				apiInfo.currentPage = 1;
				apiInfo.timeType = id;
				this.scrollPageType = true;
				this.apiInfo = apiInfo;
				this.maskTimeselected = id;
				this.MaskList = [];
				if(toptabselected == 1){
				this.initMytypeList(apiInfo);
				}else if(toptabselected == 2){
					this.initAlltypeList(apiInfo);
				}
			},
			/**
			 * 搜索框确认触发事件
			 */
			searchConfirm:function(e){
				let apiInfo = this.apiInfo;
				
				if(e.target.value == '' && apiInfo.searchList.length == 0){
					return;
				}
				this.searchText = e.target.value;
				this.MaskList = [];
				if(e.target.value != ''){
					apiInfo.searchList = [{"column":"taskName","searchNames":[e.target.value],"type":"1"},{"column":"taskNo","searchNames":[e.target.value],"type":"1"}];
				}else{
					apiInfo.searchList = [];
				}
				this.initAlltypeList(apiInfo);
				this.apiInfo = apiInfo;
				
			},
			/**
			 * 搜索框输入触发事件
			 */
			searchInputChange:function(e){
				this.searchText = e.target.value;
			},
			/**
			 * 搜索框重置触发事件
			 */
			searchreset:function(){
				console.log('reset');
				this.searchText ='';
				this.apiInfo.searchList = [];
				this.initAlltypeList(this.apiInfo);
			},
			/**
			 * 跳转至任务详情页面
			 */
			maskDetail:function(data){
				console.log(data);
				uni.navigateTo({
					url: '/pages/mask/detail/detail?id=' + data.id,
				});
			},
			/**
			 * 跳转至月周日任务排序页面
			 */
			goMaskSort:function(){
				uni.navigateTo({
					url: '/pages/mask/sort/sort',
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #efefef;
		// min-height: 100vh;
	}
	.move-box{
		position: fixed;
		left: 20rpx;
		top:150rpx;
		width: calc(100% - 40rpx);
		height: calc(100vh - 200rpx);
		pointer-events: none;
		z-index:5;
		.add-box{
			width: 60rpx;
			height: 60rpx;
			background:rgba(0,0,0,0.8);
			display: flex;
			position:relative;
			pointer-events: auto;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			.icon{
				width: 50%;
				height:50%;
				display: block;
			}
		}
	}
	.top-box {
		position: fixed;
		background-color: #333333;
		width:100%;
		box-sizing: border-box;
		height: 80rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;

		.top-tab {
			display: flex;

			.tab-item {
				color: white;
				font-size: 26rpx;
				padding: 0 20rpx;
				line-height: 80rpx;
				position: relative;
			}

			.selected::after {
				content: '';
				background-color: white;
				width: 100%;
				height: 4rpx;
				position: absolute;
				bottom: 4rpx;
				left: 0;
			}
		}
	}

	.content-box {
		overflow: hidden;

		.content-nav-box {
			position: relative;

			.content-button {
				height: 60rpx;
				line-height: 60rpx;
				border: 2rpx solid #4fac7d;
				color: #4fac7d;
				width: fit-content;
				border-radius: 10rpx;
				font-size: 28rpx;
				padding: 0 20rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}

			.content-tab {
				display: flex;
				width: fit-content;
				margin: 0 auto;
				margin-bottom: 25rpx;
				border: 2rpx solid #4fac7d;
				border-radius: 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				margin-top: 30rpx;

				.tab-item {
					padding: 0 30rpx;
					background-color: white;
				}

				.selected {
					background-color: #3cb36f;
					color: white;
				}
			}
			.scroll-mask-nav-box{
				width: 100%;
				height:60rpx;
				white-space: nowrap;
				margin-bottom:10rpx;
				.nav-mask-content-box{
					display: flex;
					flex-wrap: nowrap;
					width: 100%;
					.scroll-nav-item {
						height: 60rpx;
						font-size: 28rpx;
						line-height: 60rpx;
						margin: 0 10rpx;
						padding: 0 30rpx;
					}
					.selected{
						position: relative;
					}
					.selected::after{
						content: '';
						background-color:black;
						width: 100%;
						height: 4rpx;
						position: absolute;
						bottom: 0;
						left: 0;
					}
					.scroll-nav-item:first-child {
						margin-left: 0;
					}
					
				}
				
			}
			.scroll-nav-box {
				width: calc(100% - 50rpx);
				margin: 0 auto;
				height: 68rpx;
				white-space: nowrap;

				.nav-content-box {
					display: flex;
					flex-wrap: nowrap;
					width: 100%;

					.scroll-nav-item {
						height: 60rpx;
						font-size: 28rpx;
						line-height: 60rpx;
						border: 2rpx solid #dadadc;
						background-color: white;
						margin: 0 14rpx;
						padding: 0 30rpx;
						border-radius: 10rpx;
					}

					.scroll-nav-item:first-child {
						margin-left: 0;
					}

					.navselected {
						background-color: #3f9efa;
						color: white;
					}
				}
			}
			.search-box{
				display: flex;
				background-color: white;
				width: calc(100% - 50rpx);
				margin: 20rpx auto;
				height:70rpx;
				position: relative;
				border-radius:16rpx;
				overflow: hidden;
				-moz-box-shadow: -1rpx 1rpx 15rpx #333333;
				-webkit-box-shadow: -1rpx 1rpx 15rpx #333333;
				box-shadow: -1rpx 1rpx 15rpx #333333;
				.icon{
					padding: 16rpx;
				}
				.close-icon{
					width: 50rpx;
					height: 50rpx;
					margin-top:10rpx;
					margin-top:10rpx;
				}
				.text{
					flex: 1;
					height: 70rpx;
					font-size: 28rpx;
				}
			}
		}

		.card-box {
			width: 100%;
			height: calc(100vh - 300rpx);
			
			.clear{
				height: 100rpx;
			}
		}
		.all-card-box{
			height: calc(100vh - 370rpx);
		}
	}
</style>
